import 'dart:async';
import 'package:flutter/material.dart';
import 'package:login/pages/register2.dart';
// import 'dart:async';

class RegisterPage1 extends StatefulWidget {
  //有状态
  //
  final String tel; //final最终不可修改
  RegisterPage1({Key key, this.tel}) : super(key: key);

  @override
  _RegisterPage1State createState() {
    // print('接收到的电话号码：' + tel); //测试语句
    return _RegisterPage1State();
  }
}

class _RegisterPage1State extends State<RegisterPage1> {
  //倒计数秒数
  int _sendTime = 10; //定义属性
  @override
  void initState() {
    //定义方法
    //生命周期初始化
    super.initState();
    //进入页面倒计时
    this._showTime();
  }

  //倒计时
  void _showTime() {
    //进入页面，即启动倒计时
    if (this._sendTime > 0) {
      //Timer,flutter自带的定时器，这里设定每个1000毫秒调用一次
      Timer.periodic(Duration(seconds: 1), (timer) {
        //控制台打印时间
        print(this._sendTime);
        //将数据更新放在setState方法中，实现界面绑定自动局部刷新
        if (mounted) {
          // this._sendTime --;
          setState(() {
            this._sendTime--;
          });
        }
        //如果_sendTime为0 ，清除定时器
        if (this._sendTime <= 0) {
          timer.cancel();
        }
      });
    }
  }

  //重新发送验证码
  void _reSendCode() {
    setState(() {
      //重置倒计时
      this._sendTime = 10;
    });
    //启用倒计时
    this._showTime();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            '注册',
          ),
          // color: Colors.yellowAccent,
        ),
        body: Container(
          child: ListView(
            children: <Widget>[
              Container(
                  margin: EdgeInsets.all(20.0),
                  child: Text(
                    '验证码已发送至${this.widget.tel}，请输入您收到的验证码', //动态接受
                    style: TextStyle(fontSize: 20.0, color: Colors.black),
                    maxLines: 2, //设计几行
                    overflow: TextOverflow.ellipsis, //溢出设置后面...
                  )),

              //请输入验证码
              Container(
                margin: EdgeInsets.only(bottom: 20.0),
                child: Row(
                  children: <Widget>[
                    Container(
                      width: 230.0,
                      child: TextField(
                        keyboardType: TextInputType.number,
                        cursorColor: Colors.orangeAccent,
                        decoration: InputDecoration(hintText: '请输入验证码'),
                      ),
                    ),
                    Container(
                      width: 120.0,
                      child: RaisedButton(
                        child: Text(
                          //用三元表达式来判断按钮文本
                          this._sendTime == 0
                              ? '重新发送'
                              : '重新发送${this._sendTime}s',
                          style: TextStyle(color: Colors.white, fontSize: 14.0),
                        ),

                        color: Colors.orangeAccent,

                        //事件为null禁用

                        onPressed:
                            //当计数走完，则点击重新发送，否则禁用
                            this._sendTime == 0 ? this._reSendCode : null,
                        shape: new RoundedRectangleBorder(
                            //设置为圆角
                            borderRadius: BorderRadius.circular(20),
                            //无边框
                            side: BorderSide.none),
                      ),
                    ),
                  ],
                ),
              ),

              //下一步按钮
              RaisedButton(
                child: Text(
                  '下一步',
                  style: TextStyle(color: Colors.white, fontSize: 14.0),
                ),
                color: Colors.blue[300],

                //事件为null禁用
                onPressed: () {
                  Navigator.push(context,
                      new MaterialPageRoute(builder: (BuildContext context) {
                      return RegisterPage2(tel: this.widget.tel);
                  }));
                },
                shape: new RoundedRectangleBorder(
                    //设置为圆角
                    borderRadius: BorderRadius.circular(20),
                    //无边框
                    side: BorderSide.none),
              )
            ],
          ),
        ));
  }
}
